/*========================== GLOBAL ===========================*/ :root { /* ========================= ODLC GLOBAL COLORS ========================= */ --navy: #083C7C; --navy2: #083C7C; --blue: #083C7C; --cyan: #00a8ff; --purple: #6335e8; --yellow: #ffc400; --white: #ffffff; --muted: #899abd; --border: rgba(0, 168, 255, .30); --section-max-width: 1500px; /* Main Typography */ --font-main: "Inter", "Segoe UI", Arial, sans-serif; /* Main Colors */ --text-dark: #0b1f4d; --text-primary: #17203d; --text-body: #667085; --text-light: #ffffff; /* Font Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --weight-extrabold: 800; } /* ========================================================= 2. GLOBAL BODY ========================================================= */ html, body { font-family: var(--font-main); color: var(--text-primary); font-size: 16px; line-height: 1.6; } /* ========================================================= 3. GLOBAL PARAGRAPHS ========================================================= */ p { font-size: 16px; line-height: 1.7; font-weight: 400; } /* ========================================================= 4. MAIN SECTION HEADINGS ========================================================= */ .section-title, .programmes-title { font-size: 52px; line-height: 1.12; font-weight: 800; letter-spacing: -1.2px; } /* ========================================================= 5. OTHER MAIN SECTION HEADINGS ========================================================= */ .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 46px; line-height: 1.15; font-weight: 800; letter-spacing: -1px; } /* ========================================================= 6. SPECIAL LARGE HERO HEADINGS ========================================================= */ .hero-section h1, .hero-section h2 { font-size: 54px; line-height: 1.1; font-weight: 800; } /* ========================================================= 7. SECTION DESCRIPTION ========================================================= */ .section-desc, .programmes-description, .testimonial-section > p, .blog-section > p, .section-description { font-size: 18px; line-height: 1.7; font-weight: 400; color: var(--text-body); } /* ========================================================= 8. SECTION BADGES ========================================================= */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge, .hero-badge { font-size: 14px; line-height: 1.2; font-weight: 700; letter-spacing: .5px; } /* ========================================================= 9. CARD HEADINGS ========================================================= */ .feature-card h4, .blog-card h4, .review-card h5, .info-content h5, .info-card h3, .impact-title { font-weight: 700; } /* ========================================================= 10. FEATURE CARD HEADING ========================================================= */ .feature-card h4 { font-size: 19px; line-height: 1.3; } /* ========================================================= 11. FEATURE CARD DESCRIPTION ========================================================= */ .feature-card p { font-size: 14px; line-height: 1.55; } /* ========================================================= 12. IMPACT CARD ========================================================= */ .impact-subtitle { font-size: 13px; font-weight: 700; letter-spacing: .7px; } .impact-title { font-size: 30px; line-height: 1.25; } .impact-item h3 { font-size: 28px; line-height: 1.1; font-weight: 800; } .impact-item p { font-size: 14px; line-height: 1.4; } /* ========================================================= 13. INFORMATION STRIP ========================================================= */ .info-content h5 { font-size: 18px; line-height: 1.3; font-weight: 700; } .info-content p { font-size: 13px; line-height: 1.5; } /* ========================================================= 14. PROGRAMME CARDS ========================================================= */ .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 17px; line-height: 1.35; font-weight: 700; } .program-card p, .programme-card p { font-size: 13px; line-height: 1.55; } /* ========================================================= 15. PROGRAMME COUNTER ========================================================= */ .program-count-card h3 { font-size: 26px; line-height: 1.2; font-weight: 800; } .program-count-card p { font-size: 14px; line-height: 1.5; } /* ========================================================= 16. APPLICATION / GATEWAY SECTION ========================================================= */ .application-section h2, .gateway-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .application-section h4, .gateway-section h4 { font-size: 17px; line-height: 1.35; font-weight: 700; } .application-section p, .gateway-section p { font-size: 14px; line-height: 1.55; } /* ========================================================= 17. COMPARISON / WHY ODLC ========================================================= */ .comparison-section h2, .why-odlc-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .comparison-card h3, .stat-card h3 { font-size: 30px; line-height: 1.1; font-weight: 800; } .comparison-card p, .stat-card p { font-size: 13px; line-height: 1.4; font-weight: 500; } /* ========================================================= 18. CERTIFICATION CTA ========================================================= */ .certification-section h2, .skills-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .certification-section p, .skills-section p { font-size: 16px; line-height: 1.65; } /* ========================================================= 19. BOTTOM FEATURE STRIPS ========================================================= */ .feature-strip h4, .bottom-feature h4 { font-size: 16px; line-height: 1.3; font-weight: 700; } .feature-strip p, .bottom-feature p { font-size: 13px; line-height: 1.45; } /* ========================================================= 20. TESTIMONIALS ========================================================= */ .review-card h5 { font-size: 16px; line-height: 1.3; font-weight: 700; } .review-card small { font-size: 12px; } .review-card p { font-size: 14px; line-height: 1.65; } .review-card a { font-size: 13px; font-weight: 600; } /* ========================================================= 21. BLOG ========================================================= */ .blog-card h4 { font-size: 18px; line-height: 1.4; font-weight: 700; } .blog-card p { font-size: 14px; line-height: 1.6; } .blog-category { font-size: 12px; font-weight: 600; } .blog-footer a { font-size: 13px; font-weight: 600; } .date-box h4 { font-size: 18px; line-height: 1; } .date-box span { font-size: 11px; } /* ========================================================= 22. FAQ ========================================================= */ .faq-section h2 { font-size: 46px; line-height: 1.15; font-weight: 800; } .faq-question, .accordion-button { font-size: 16px; line-height: 1.4; font-weight: 600; } .faq-answer, .accordion-body { font-size: 14px; line-height: 1.65; } /* ========================================================= 23. BUTTONS ========================================================= */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 14px; line-height: 1.2; font-weight: 600; } /* ========================================================= 24. HEADER / NAVIGATION ========================================================= */ .navbar-nav .nav-link { font-size: 14px; font-weight: 600; } .navbar-brand { font-size: 18px; font-weight: 700; } /* ========================================================= 25. FOOTER ========================================================= */ footer h4, footer h5 { font-size: 16px; line-height: 1.3; font-weight: 700; } footer p, footer li, footer a { font-size: 13px; line-height: 1.6; } footer .footer-title { font-size: 17px; font-weight: 700; } /* ========================================================= 26. LAPTOP 992px - 1199px ========================================================= */ @media (max-width: 1199px) { .section-title, .programmes-title { font-size: 46px; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 42px; } .hero-section h1, .hero-section h2 { font-size: 48px; } .section-desc, .programmes-description { font-size: 17px; } .feature-card h4 { font-size: 18px; } .feature-card p { font-size: 13px; } .blog-card h4 { font-size: 17px; } } /* ========================================================= 27. TABLET 768px - 991px ========================================================= */ @media (max-width: 991px) { body { font-size: 15px; } p { font-size: 15px; line-height: 1.65; } /* Main headings */ .section-title, .programmes-title { font-size: 40px; line-height: 1.15; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 38px; } .hero-section h1, .hero-section h2 { font-size: 42px; } /* Description */ .section-desc, .programmes-description { font-size: 16px; line-height: 1.7; } /* Badge */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 13px; } /* Cards */ .feature-card h4 { font-size: 17px; } .feature-card p { font-size: 13px; } .impact-title { font-size: 26px; } .impact-item h3 { font-size: 25px; } .impact-item p { font-size: 13px; } .blog-card h4 { font-size: 17px; } .blog-card p { font-size: 13px; } .review-card p { font-size: 13px; } /* FAQ */ .faq-question, .accordion-button { font-size: 15px; } .faq-answer, .accordion-body { font-size: 13px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 13px; } } /* ========================================================= 28. MOBILE 576px - 767px ========================================================= */ @media (max-width: 767px) { body { font-size: 15px; } p { font-size: 14px; line-height: 1.65; } /* Main section headings */ .section-title, .programmes-title { font-size: 32px; line-height: 1.18; letter-spacing: -.5px; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 32px; line-height: 1.2; } .hero-section h1, .hero-section h2 { font-size: 34px; line-height: 1.15; } /* Description */ .section-desc, .programmes-description { font-size: 15px; line-height: 1.65; } /* Badges */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 12px; } /* Feature cards */ .feature-card h4 { font-size: 16px; } .feature-card p { font-size: 12px; line-height: 1.5; } /* Impact */ .impact-title { font-size: 24px; } .impact-item h3 { font-size: 23px; } .impact-item p { font-size: 12px; } /* Programme cards */ .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 16px; } .program-card p, .programme-card p { font-size: 12px; } /* Testimonials */ .review-card h5 { font-size: 15px; } .review-card small { font-size: 11px; } .review-card p { font-size: 13px; line-height: 1.6; } /* Blogs */ .blog-card h4 { font-size: 16px; } .blog-card p { font-size: 13px; } /* FAQ */ .faq-question, .accordion-button { font-size: 14px; } .faq-answer, .accordion-body { font-size: 13px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 13px; } /* Footer */ footer h4, footer h5 { font-size: 15px; } footer p, footer li, footer a { font-size: 12px; } } /* ========================================================= 29. SMALL MOBILE BELOW 576px ========================================================= */ @media (max-width: 575px) { body { font-size: 14px; } p { font-size: 14px; line-height: 1.65; } /* Main headings */ .section-title, .programmes-title { font-size: 29px; line-height: 1.2; } .testimonial-section h2, .blog-section h2, .faq-section h2, .faq-heading, .why-odlc-title, .section-heading { font-size: 29px; line-height: 1.2; } .hero-section h1, .hero-section h2 { font-size: 30px; } /* Description */ .section-desc, .programmes-description { font-size: 14px; line-height: 1.65; } /* Badge */ .section-tag, .programmes-badge, .testimonial-badge, .blog-badge, .faq-badge { font-size: 11px; } /* Cards */ .feature-card h4 { font-size: 15px; } .feature-card p { font-size: 12px; } .impact-title { font-size: 22px; } .impact-item h3 { font-size: 21px; } .impact-item p { font-size: 11px; } .program-card h3, .program-card h4, .programme-card h3, .programme-card h4 { font-size: 15px; } .program-card p, .programme-card p { font-size: 12px; } /* Blog */ .blog-card h4 { font-size: 15px; } .blog-card p { font-size: 12px; } /* Testimonials */ .review-card h5 { font-size: 14px; } .review-card p { font-size: 12px; } /* FAQ */ .faq-question, .accordion-button { font-size: 13px; } .faq-answer, .accordion-body { font-size: 12px; } /* Buttons */ button, .btn, a.btn, .blog-btn, .google-review-btn { font-size: 12px; } /* Footer */ footer h4, footer h5 { font-size: 14px; } footer p, footer li, footer a { font-size: 11px; } } .section-container { width: 100%; max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 40px; padding-right: 40px; box-sizing: border-box; } /* ========================= DESKTOP ========================= */ .section-container { width: 100%; max-width: var(--section-max-width); margin: 0 auto; padding-left: 20px; padding-right: 20px; } /* ========================= LAPTOP ========================= */ @media (max-width: 1399px) { .section-container { max-width: 1300px; padding-left: 20px; padding-right: 20px; } } /* ========================= TABLET ========================= */ @media (max-width: 991px) { .section-container { max-width: 100%; padding-left: 15px; padding-right: 15px; } } /* ========================= MOBILE ========================= */ @media (max-width: 767px) { .section-container { padding-left: 10px; padding-right: 10px; } } /* ========================================================= DIPLOMA – 1 YEAR SKILL, VOCATIONAL & PROFESSIONAL PROGRAMMES ========================================================= */ /* ========================================================= GLOBAL ========================================================= */ .sv-banner, .eligibility-section, .courses-section { width: 100%; font-family: Arial, Helvetica, sans-serif; } .sv-banner *, .eligibility-section *, .courses-section * { box-sizing: border-box; } /* ========================================================= COMMON CONTAINER ========================================================= */ .sv-banner-container, .eligibility-section .container, .courses-container { width: 100%; max-width: 1740px; margin: 0 auto; padding-left: 42px; padding-right: 42px; } /* ========================================================= BANNER ========================================================= */ .skill-vocational-diploma-banner { width: 100%; min-height: 455px; position: relative; overflow: hidden; background: #062d5c; font-family: Arial, Helvetica, sans-serif; } /* ========================================================= MAIN BANNER ========================================================= */ .skill-vocational-diploma { width: 100%; min-height: 455px; position: relative; overflow: hidden; background: #062d5c; font-family: Arial, Helvetica, sans-serif; } /* ========================================================= MAIN BANNER ========================================================= */ .skill-vocational-diploma-inner { width: 100%; min-height: 455px; position: relative; overflow: hidden; display: flex; align-items: center; } /* ========================================================= LEFT CONTENT ========================================================= */ .skill-vocational-diploma-content { width: 52%; position: relative; z-index: 5; /* padding: 65px 40px 65px 7%; */ color: #ffffff; } /* ========================================================= CATEGORY ========================================================= */ .certificate-category { color: #9fc2ff; font-family: Arial, Helvetica, sans-serif; font-size: 16px; font-weight: 700; letter-spacing: 2px; margin-bottom: 12px; text-transform: uppercase; } /* ========================================================= BUTTON ========================================================= */ .certificate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; margin-top: 22px; min-height: 54px; padding: 0 28px; background: #ffffff; color: #083C7C; border: 2px solid #ffffff; border-radius: 7px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 700; text-decoration: none; transition: all 0.3s ease; } .certificate-btn i { font-size: 18px; transition: transform 0.3s ease; } .certificate-btn:hover { background: transparent; color: #ffffff; border-color: #ffffff; } .certificate-btn:hover i { transform: translateX(5px); } /* ========================================================= LABEL ========================================================= */ .skill-vocational-diploma-label { display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px; margin-bottom: 25px; border-radius: 30px; background: rgba(83, 119, 205, 0.35); border: 1px solid rgba(180, 204, 255, 0.35); color: #ffffff; font-size: 12px; font-weight: 700; letter-spacing: 0.5px; } .skill-vocational-diploma-label i { font-size: 13px; } .skill-vocational-diploma-content h5 { color: #a9c7ff; } /* ========================================================= HEADING ========================================================= */ .skill-vocational-diploma-content h3 { margin: 0; max-width: 600px; color: #ffffff; font-size: clamp(42px, 4.5vw, 68px); line-height: 1.08; font-weight: 600; letter-spacing: -1.5px; } .skill-vocational-diploma-content h3 span { color: #a9c7ff; } /* ========================================================= SMALL LINE ========================================================= */ .skill-vocational-diploma-line { width: 36px; height: 3px; margin: 24px 0 20px; background: #ffffff; border-radius: 10px; } /* ========================================================= DESCRIPTION ========================================================= */ .skill-vocational-diploma-content p { max-width: 480px; margin: 0; color: #e5edfb; font-size: 16px; line-height: 1.75; text-align: left; } /* ========================================================= RIGHT IMAGE AREA ========================================================= */ .skill-vocational-diploma-image { width: 58%; right: 0; clip-path: ellipse(70% 90% at 72% 50%); } .skill-vocational-diploma-image::before { left: -32%; width: 58%; } /* ========================================================= IMAGE ========================================================= */ .skill-vocational-diploma-image-circle { width: 100%; height: 100%; min-height: 620px; position: relative; overflow: hidden; border-left: none; background: #dce9fa; } .skill-vocational-diploma-image-circle img { width: 100%; height: 100%; min-height: 720px; display: block; object-fit: cover; object-position: center; transition: transform 0.7s ease; } /* ========================================================= DARK BLUE CURVE ========================================================= */ .skill-vocational-diploma-image::before { content: ""; position: absolute; top: -10%; left: -28%; width: 55%; height: 120%; z-index: 3; border-radius: 50%; background: #062d5c; } /* ========================================================= TOP DECORATIVE DOTS ========================================================= */ .skill-vocational-diploma-dots { position: absolute; top: 20px; left: 28px; width: 75px; height: 75px; z-index: 6; background-image: radial-gradient( circle, rgba(155, 190, 255, 0.75) 1.5px, transparent 1.5px ); background-size: 12px 12px; opacity: 0.55; } /* ========================================================= DECORATIVE RINGS ========================================================= */ .skill-vocational-diploma-ring { position: absolute; z-index: 4; border: 1px solid rgba(155, 190, 255, 0.28); border-radius: 50%; pointer-events: none; } .skill-vocational-diploma-ring-top { width: 125px; height: 125px; top: -45px; left: 47%; } .skill-vocational-diploma-ring-top::before, .skill-vocational-diploma-ring-top::after { content: ""; position: absolute; border: 1px solid rgba(155, 190, 255, 0.22); border-radius: 50%; } .skill-vocational-diploma-ring-top::before { inset: 15px; } .skill-vocational-diploma-ring-top::after { inset: 30px; } /* ========================================================= BOTTOM RING ========================================================= */ .skill-vocational-diploma-ring-bottom { width: 150px; height: 150px; bottom: -80px; left: -70px; border: 3px solid rgba(155, 190, 255, 0.75); } .skill-vocational-diploma-ring-bottom::before { content: ""; position: absolute; inset: 15px; border: 1px solid rgba(155, 190, 255, 0.25); border-radius: 50%; } /* ========================================================= RESPONSIVE - LARGE TABLET ========================================================= */ @media (max-width: 1199px) { .skill-vocational-diploma, .skill-vocational-diploma-inner { min-height: 430px; } .skill-vocational-diploma-content { padding-left: 6%; } .skill-vocational-diploma-content h1 { font-size: 50px; } .skill-vocational-diploma-content p { max-width: 430px; font-size: 14px; } } /* ========================================================= SKILL & VOCATIONAL BANNER RESPONSIVE - TABLET + MOBILE ========================================================= */ /* ========================================================= TABLET 768px - 991px ========================================================= */ @media (min-width: 768px) and (max-width: 991px) { .skill-vocational-diploma { min-height: 430px; } .skill-vocational-diploma-inner { min-height: 430px; display: flex; align-items: center; } /* --------------------------------------------- CONTENT --------------------------------------------- */ .skill-vocational-diploma-content { width: 55%; padding: 45px 25px 45px 5%; z-index: 6; } .skill-vocational-diploma-label { padding: 8px 15px; margin-bottom: 18px; font-size: 11px; } .skill-vocational-diploma-content h1 { max-width: 500px; font-size: 40px !important; line-height: 1.15; letter-spacing: -0.8px; } .skill-vocational-diploma-line { margin: 18px 0 16px; } .skill-vocational-diploma-content p { max-width: 420px; font-size: 14px; line-height: 1.6; color: #ffffff; } /* --------------------------------------------- IMAGE --------------------------------------------- */ .skill-vocational-diploma-image { width: 58%; height: 100%; min-height: 430px; clip-path: ellipse(72% 90% at 75% 50%); } .skill-vocational-diploma-image-circle { min-height: 430px; } .skill-vocational-diploma-image-circle img { min-height: 430px; object-fit: cover; object-position: 62% center; } /* --------------------------------------------- BLUE CURVE --------------------------------------------- */ .skill-vocational-diploma-image::before { top: -5%; left: -30%; width: 48%; height: 110%; } /* --------------------------------------------- DECORATIONS --------------------------------------------- */ .skill-vocational-diploma-dots { width: 60px; height: 60px; top: 15px; left: 18px; background-size: 10px 10px; } .skill-vocational-diploma-ring-top { width: 100px; height: 100px; top: -30px; left: 48%; } } /* ========================================================= MOBILE 0px - 767px ========================================================= */ @media (max-width: 767px) { /* --------------------------------------------- MAIN BANNER --------------------------------------------- */ .skill-vocational-diploma { width: 100%; min-height: 560px; height: auto; position: relative; overflow: hidden; background: #062d5c; } /* --------------------------------------------- INNER --------------------------------------------- */ .skill-vocational-diploma-inner { width: 100%; min-height: 560px; height: auto; position: relative; display: block; overflow: hidden; } /* --------------------------------------------- IMAGE --------------------------------------------- */ .skill-vocational-diploma-image { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-height: 560px; z-index: 1; clip-path: none !important; } .skill-vocational-diploma-image-circle { width: 100%; height: 100%; min-height: 560px; border: 0; background: #dce9fa; overflow: hidden; } .skill-vocational-diploma-image-circle img { width: 100% !important; height: 100% !important; min-height: 560px; display: block; object-fit: cover !important; /* Move image slightly right so student's face remains visible. */ object-position: 62% center !important; } /* --------------------------------------------- DARK OVERLAY IMPORTANT FOR TEXT VISIBILITY --------------------------------------------- */ .skill-vocational-diploma-image::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient( 180deg, rgba(6, 45, 92, 0.15) 0%, rgba(6, 45, 92, 0.30) 28%, rgba(6, 45, 92, 0.65) 53%, rgba(6, 45, 92, 0.92) 100% ); pointer-events: none; } /* --------------------------------------------- REMOVE DESKTOP BLUE CURVE --------------------------------------------- */ .skill-vocational-diploma-image::before { display: none !important; } /* --------------------------------------------- CONTENT --------------------------------------------- */ .skill-vocational-diploma-content { position: relative; z-index: 5; width: 100% !important; min-height: 560px; height: auto; padding: 115px 22px 55px !important; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; box-sizing: border-box; } /* --------------------------------------------- LABEL --------------------------------------------- */ .skill-vocational-diploma-label { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; margin-bottom: 18px; border-radius: 25px; background: rgba(5, 50, 100, 0.70); border: 1px solid rgba(255,255,255,0.40); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; backdrop-filter: blur(5px); } .skill-vocational-diploma-label i { font-size: 12px; } /* --------------------------------------------- HEADING --------------------------------------------- */ .skill-vocational-diploma-content h1 { width: 100%; max-width: 100%; margin: 0 !important; color: #ffffff !important; font-size: 31px !important; line-height: 1.16 !important; font-weight: 700 !important; letter-spacing: -0.5px; text-align: left; text-shadow: 0 2px 8px rgba(0,0,0,0.60); } .skill-vocational-diploma-content h1 span { color: #b8d4ff !important; } /* --------------------------------------------- LINE --------------------------------------------- */ .skill-vocational-diploma-line { width: 40px; height: 3px; margin: 17px 0 16px; background: #ffffff; border-radius: 10px; } /* --------------------------------------------- DESCRIPTION --------------------------------------------- */ .skill-vocational-diploma-content p { width: 100%; max-width: 100%; margin: 0; color: #ffffff !important; font-size: 14px !important; line-height: 1.65 !important; font-weight: 400; text-align: left !important; text-shadow: 0 2px 8px rgba(0,0,0,0.70); } /* --------------------------------------------- STRONG TEXT --------------------------------------------- */ .skill-vocational-diploma-content p strong, .skill-vocational-diploma-content p b { color: #ffffff !important; font-weight: 700 !important; } /* --------------------------------------------- DECORATIVE DOTS --------------------------------------------- */ .skill-vocational-diploma-dots { width: 55px; height: 55px; top: 15px; left: 15px; z-index: 6; background-size: 9px 9px; opacity: 0.35; } /* --------------------------------------------- TOP RING --------------------------------------------- */ .skill-vocational-diploma-ring-top { width: 85px; height: 85px; top: -25px; right: -10px; left: auto; z-index: 4; opacity: 0.5; } .skill-vocational-diploma-ring-top::before { inset: 12px; } .skill-vocational-diploma-ring-top::after { inset: 25px; } /* --------------------------------------------- BOTTOM RING --------------------------------------------- */ .skill-vocational-diploma-ring-bottom { width: 100px; height: 100px; bottom: -55px; left: -50px; opacity: 0.45; } } /* ========================================================= SMALL MOBILE 481px - 600px ========================================================= */ @media (min-width: 481px) and (max-width: 600px) { .skill-vocational-diploma { min-height: 540px; } .skill-vocational-diploma-inner { min-height: 540px; } .skill-vocational-diploma-image, .skill-vocational-diploma-image-circle { min-height: 540px; } .skill-vocational-diploma-image-circle img { min-height: 540px; object-position: 60% center !important; } .skill-vocational-diploma-content { min-height: 540px; padding: 105px 24px 45px !important; } .skill-vocational-diploma-content h1 { font-size: 30px !important; } } /* ========================================================= SMALL PHONE ========================================================= */ @media (max-width: 480px) { .skill-vocational-diploma { min-height: 520px; } .skill-vocational-diploma-inner { min-height: 520px; } .skill-vocational-diploma-image { min-height: 520px; } .skill-vocational-diploma-image-circle { min-height: 520px; } .skill-vocational-diploma-image-circle img { min-height: 520px; object-position: 59% center !important; } .skill-vocational-diploma-content { min-height: 520px; padding: 95px 19px 38px !important; } .skill-vocational-diploma-label { padding: 7px 12px; margin-bottom: 15px; font-size: 10px; } .skill-vocational-diploma-content h1 { font-size: 27px !important; line-height: 1.18 !important; letter-spacing: -0.3px; } .skill-vocational-diploma-line { width: 35px; height: 3px; margin: 14px 0 14px; } .skill-vocational-diploma-content p { font-size: 13px !important; line-height: 1.6 !important; } .skill-vocational-diploma-dots { width: 48px; height: 48px; top: 12px; left: 12px; background-size: 8px 8px; } .skill-vocational-diploma-ring-top { width: 75px; height: 75px; top: -20px; right: -15px; } .skill-vocational-diploma-ring-bottom { width: 85px; height: 85px; bottom: -45px; left: -40px; } } /* ========================================================= EXTRA SMALL PHONE ========================================================= */ @media (max-width: 360px) { .skill-vocational-diploma { min-height: 500px; } .skill-vocational-diploma-inner { min-height: 500px; } .skill-vocational-diploma-image, .skill-vocational-diploma-image-circle { min-height: 500px; } .skill-vocational-diploma-image-circle img { min-height: 500px; object-position: 57% center !important; } .skill-vocational-diploma-content { min-height: 500px; padding: 85px 16px 30px !important; } .skill-vocational-diploma-content h1 { font-size: 24px !important; line-height: 1.18 !important; } .skill-vocational-diploma-content p { font-size: 12px !important; line-height: 1.55 !important; } .skill-vocational-diploma-label { font-size: 9px; padding: 6px 10px; } } /* ========================================================= ELIGIBILITY SECTION ========================================================= */ .eligibility-section { padding: 60px 0; background: #ffffff; } /* ========================================================= COMMON ANIMATED HEADING ========================================================= */ .animated-section-heading { width: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; margin-bottom: 35px; } /* Icon */ .heading-icon { position: relative; width: 78px; height: 78px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; background: #ffffff; border: 1px solid #d6e3f5; border-radius: 50%; box-shadow: 0 8px 25px rgba(8, 60, 124, 0.10); z-index: 1; animation: headingFloat 3s ease-in-out infinite; } .heading-icon::before { content: ""; position: absolute; width: 58px; height: 58px; background: #edf4ff; border-radius: 50%; z-index: -1; } .heading-icon i { font-size: 30px; color: #0755b8; transition: transform 0.4s ease, color 0.4s ease; } /* Rotating ring */ .heading-icon::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 2px solid transparent; border-top-color: #3d83e8; border-right-color: #3d83e8; opacity: 0; } .animated-section-heading:hover .heading-icon::after { opacity: 1; animation: headingRotate 1.5s linear infinite; } .animated-section-heading:hover .heading-icon i { transform: translateY(-2px) scale(1.08); color: #003f91; } /* Heading text */ .animated-section-heading h2 { margin: 0; color: #083c7c; font-size: 30px; font-weight: 700; line-height: 1.2; letter-spacing: -0.3px; transition: color 0.3s ease, transform 0.3s ease; } .animated-section-heading:hover h2 { color: #064b9b; transform: translateY(-2px); } /* Yellow line */ .heading-accent { width: 42px; height: 4px; margin-top: 12px; background: #f4b400; border-radius: 10px; transform-origin: center; transition: width 0.4s ease, box-shadow 0.4s ease; } .animated-section-heading:hover .heading-accent { width: 65px; box-shadow: 0 3px 10px rgba(244, 180, 0, 0.25); } /* ========================================================= ELIGIBILITY GRID ========================================================= */ .eligibility-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; width: 100%; } /* ========================================================= ELIGIBILITY CARD ========================================================= */ .eligibility-card { position: relative; min-height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 24px 20px; background: #ffffff; border: 1px solid #dce7f5; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 25px rgba(8, 60, 124, 0.05); opacity: 0; transform: translateY(30px); animation: eligibilityReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .eligibility-card:nth-child(1) { animation-delay: 0.15s; } .eligibility-card:nth-child(2) { animation-delay: 0.25s; } .eligibility-card:nth-child(3) { animation-delay: 0.35s; } .eligibility-card:nth-child(4) { animation-delay: 0.45s; } .eligibility-card:hover { transform: translateY(-7px); border-color: #aac6e7; box-shadow: 0 18px 40px rgba(8, 60, 124, 0.12); } /* Eligibility icon */ .eligibility-icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; margin-bottom: 15px; border-radius: 50%; background: #edf4ff; color: #0755b8; font-size: 20px; transition: transform 0.35s ease, background 0.35s ease; } .eligibility-card:hover .eligibility-icon { transform: scale(1.08); background: #dceaff; } /* Content */ .eligibility-content h3 { margin: 0 0 8px; color: #162d4b; font-size: 24px; font-weight: 700; line-height: 1.4; } .eligibility-content p { margin: 0; color: #536982; font-size: 16px; line-height: 1.6; } /* Number */ .eligibility-number { position: absolute; right: 10px; bottom: 5px; color: #e4edf8; font-size: 30px; font-weight: 700; line-height: 1; } /* ========================================================= COURSES SECTION ========================================================= */ .courses-section { padding: 60px 0; background: #f5f8fd; } .courses-container { position: relative; } /* ========================================================= COURSES GRID ========================================================= */ .courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 24px; row-gap: 24px; width: 100%; } /* ========================================================= COURSE CATEGORY CARD ========================================================= */ .course-category-card { width: 100%; min-height: 250px; padding: 18px 18px 20px; background: #ffffff; border: 1px solid #d8e5f4; border-radius: 12px; box-sizing: border-box; opacity: 0; transform: translateY(30px); animation: courseCardReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards; transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } /* Sequential animation */ .course-category-card:nth-child(1) { animation-delay: 0.20s; } .course-category-card:nth-child(2) { animation-delay: 0.30s; } .course-category-card:nth-child(3) { animation-delay: 0.40s; } .course-category-card:nth-child(4) { animation-delay: 0.50s; } .course-category-card:nth-child(5) { animation-delay: 0.60s; } .course-category-card:nth-child(6) { animation-delay: 0.70s; } .course-category-card:nth-child(7) { animation-delay: 0.80s; } .course-category-card:nth-child(8) { animation-delay: 0.90s; } .course-category-card:hover { transform: translateY(-7px); border-color: #9db9dc; box-shadow: 0 18px 40px rgba(8, 60, 124, 0.12); } /* ========================================================= COURSE CATEGORY HEADER ========================================================= */ .course-category-header { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; } /* Category icon */ .course-category-icon { position: relative; flex: 0 0 auto; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: #0755b8; color: #ffffff; border-radius: 8px; font-size: 21px; overflow: hidden; transition: transform 0.35s ease, border-radius 0.35s ease, box-shadow 0.35s ease; } .course-category-card:hover .course-category-icon { transform: translateY(-3px) scale(1.06); border-radius: 10px; box-shadow: 0 8px 18px rgba(8, 60, 124, 0.20); } /* Icon shine */ .course-category-icon::after { content: ""; position: absolute; top: -60%; left: -100%; width: 60%; height: 220%; background: rgba(255, 255, 255, 0.20); transform: rotate(25deg); transition: left 0.6s ease; } .course-category-card:hover .course-category-icon::after { left: 150%; } /* Category title */ .course-category-header h3 { margin: 0; color: #083c7c; font-size: 24px; font-weight: 700; line-height: 1.35; } /* ========================================================= COURSE LIST ========================================================= */ .course-list { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 12px; row-gap: 10px; } /* ========================================================= COURSE ITEM ========================================================= */ .course-item { min-height: 38px; display: flex; align-items: center; gap: 8px; padding: 8px 11px; background: #ffffff; border: 1px solid #e1eaf5; border-radius: 7px; box-sizing: border-box; transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; } .course-item:hover { transform: translateX(5px); background: #f3f8ff; border-color: #b5cbe4; box-shadow: 0 4px 12px rgba(8, 60, 124, 0.08); } /* Number */ .course-item span { flex: 0 0 auto; min-width: 30px; color: #0755b8; font-size: 16px; font-weight: 700; } /* Course text */ .course-item p { margin: 0; color: #465d77; font-size: 16px; line-height: 1.45; } /* ========================================================= ANIMATIONS ========================================================= */ @keyframes headingFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes headingRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes eligibilityReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } @keyframes courseCardReveal { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1100px) { .sv-banner-container { grid-template-columns: 46% 54%; } .sv-banner-content { padding: 45px 25px; } .sv-banner h1 { font-size: 42px; } .eligibility-grid { grid-template-columns: repeat(2, 1fr); } } /* ========================================================= MOBILE / TABLET ========================================================= */ @media (max-width: 991px) { .sv-banner { padding: 30px 0; } .sv-banner-container { grid-template-columns: 1fr; padding-left: 0; padding-right: 0; min-height: auto; } .sv-banner-content { padding: 45px 32px; } .sv-banner-image { min-height: 340px; order: 2; margin: 0 18px 18px; border-radius: 25px; } .courses-grid { grid-template-columns: 1fr; } .course-category-card { min-height: auto; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 767px) { .sv-banner { padding: 20px 0; } .sv-banner-container { border-radius: 12px; } .sv-banner-content { padding: 35px 20px; } .sv-banner h1 { font-size: 34px; line-height: 1.15; } .sv-banner-content > p { font-size: 16px; line-height: 1.65; } .sv-banner-meta { flex-direction: column; align-items: flex-start; gap: 10px; } .sv-banner-image { min-height: 280px; } .eligibility-section, .courses-section { padding: 50px 0; } .eligibility-grid { grid-template-columns: 1fr; gap: 18px; } .animated-section-heading h2 { font-size: 28px; } .course-list { grid-template-columns: 1fr; gap: 9px; } .course-category-header h3 { font-size: 24px; } } /* ========================================================= VERY SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .sv-banner-container { border-radius: 10px; } .sv-banner-content { padding: 30px 16px; } .sv-banner-top { font-size: 13px; padding: 7px 12px; } .sv-banner h1 { font-size: 30px; letter-spacing: -0.5px; } .sv-banner-line { margin: 16px 0; } .sv-banner-image { min-height: 240px; margin: 0 12px 12px; border-radius: 20px; } .eligibility-section, .courses-section { padding: 40px 0; } .animated-section-heading { margin-bottom: 28px; } .heading-icon { width: 70px; height: 70px; } .heading-icon::before { width: 52px; height: 52px; } .heading-icon i { font-size: 27px; } .animated-section-heading h2 { font-size: 26px; } .course-category-card { padding: 16px; } .course-category-header { gap: 13px; } .course-category-icon { width: 46px; height: 46px; font-size: 19px; } .course-category-header h3 { font-size: 24px; } .course-item { padding: 8px 10px; } .course-item p { font-size: 16px; } } /* ========================================================= REDUCED MOTION ========================================================= */ @media (prefers-reduced-motion: reduce) { .heading-icon, .eligibility-card, .course-category-card { animation: none !important; opacity: 1; transform: none; } .course-category-card, .course-category-icon, .course-item, .heading-icon i, .heading-accent { transition: none !important; } } /* ========================================================= SKILL & VOCATIONAL diploma DIPLOMA TABLET + MOBILE RESPONSIVE ========================================================= */ /* ---------- TABLET : 768px - 991px ---------- */ @media (min-width: 768px) and (max-width: 991px) { .skill-vocational-diploma { width: 100% !important; min-height: auto !important; height: auto !important; background: #062d5c !important; overflow: hidden !important; } .skill-vocational-diploma-inner { width: 100% !important; min-height: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* IMAGE */ .skill-vocational-diploma-image { position: relative !important; inset: auto !important; width: 100% !important; height: 330px !important; min-height: 330px !important; order: 1 !important; clip-path: none !important; overflow: hidden !important; } .skill-vocational-diploma-image-circle { width: 100% !important; height: 330px !important; min-height: 330px !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; } .skill-vocational-diploma-image-circle img { width: 100% !important; height: 330px !important; min-height: 330px !important; object-fit: cover !important; object-position: center 35% !important; display: block !important; } .skill-vocational-diploma-image::before, .skill-vocational-diploma-image::after { display: none !important; } /* CONTENT */ .skill-vocational-diploma-content { position: relative !important; width: 100% !important; min-height: auto !important; height: auto !important; order: 2 !important; padding: 42px 6% 48px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; background: #062d5c !important; box-sizing: border-box !important; } .skill-vocational-diploma-label { margin-bottom: 18px !important; font-size: 11px !important; padding: 8px 14px !important; white-space: normal !important; } .skill-vocational-diploma-content h5 { margin: 0 0 10px !important; font-size: 14px !important; line-height: 1.4 !important; color: #a9c7ff !important; } .skill-vocational-diploma-content h3, .skill-vocational-diploma-content h1 { width: 100% !important; max-width: 700px !important; margin: 0 !important; color: #fff !important; font-size: 42px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -.8px !important; text-align: left !important; } .skill-vocational-diploma-content h3 span, .skill-vocational-diploma-content h1 span { color: #a9c7ff !important; } .skill-vocational-diploma-line { width: 45px !important; height: 3px !important; margin: 18px 0 18px !important; background: #fff !important; } .skill-vocational-diploma-content p { width: 100% !important; max-width: 680px !important; margin: 0 0 18px !important; color: #e9f0fb !important; font-size: 15px !important; line-height: 1.7 !important; text-align: left !important; } .certificate-btn { width: auto !important; min-width: 240px !important; min-height: 50px !important; padding: 0 22px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; border-radius: 7px !important; font-size: 13px !important; } /* DECORATIONS */ .skill-vocational-diploma-dots { width: 60px !important; height: 60px !important; top: 15px !important; left: 15px !important; opacity: .3 !important; } .skill-vocational-diploma-ring-top { width: 90px !important; height: 90px !important; top: -30px !important; right: -25px !important; opacity: .35 !important; } .skill-vocational-diploma-ring-bottom { width: 100px !important; height: 100px !important; bottom: -55px !important; left: -50px !important; opacity: .3 !important; } } /* ---------- MOBILE : 767px and below ---------- */ @media (max-width: 767px) { .skill-vocational-diploma { width: 100% !important; min-height: auto !important; height: auto !important; background: #062d5c !important; overflow: hidden !important; } .skill-vocational-diploma-inner { width: 100% !important; min-height: auto !important; height: auto !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } /* IMAGE ON TOP */ .skill-vocational-diploma-image { position: relative !important; inset: auto !important; width: 100% !important; height: 235px !important; min-height: 235px !important; order: 1 !important; clip-path: none !important; overflow: hidden !important; } .skill-vocational-diploma-image-circle { width: 100% !important; height: 235px !important; min-height: 235px !important; border: none !important; border-radius: 0 !important; overflow: hidden !important; } .skill-vocational-diploma-image-circle img { width: 100% !important; height: 235px !important; min-height: 235px !important; object-fit: cover !important; object-position: center 35% !important; display: block !important; } .skill-vocational-diploma-image::before, .skill-vocational-diploma-image::after { display: none !important; } /* CONTENT BELOW IMAGE */ .skill-vocational-diploma-content { position: relative !important; width: 100% !important; min-height: auto !important; height: auto !important; order: 2 !important; padding: 30px 22px 38px !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; background: #062d5c !important; box-sizing: border-box !important; } .skill-vocational-diploma-label { max-width: 100% !important; margin-bottom: 15px !important; padding: 7px 11px !important; font-size: 10px !important; line-height: 1.3 !important; white-space: normal !important; } .skill-vocational-diploma-content h5 { margin: 0 0 8px !important; font-size: 12px !important; line-height: 1.4 !important; letter-spacing: .6px !important; color: #a9c7ff !important; } .skill-vocational-diploma-content h3, .skill-vocational-diploma-content h1 { width: 100% !important; max-width: 100% !important; margin: 0 !important; color: #fff !important; font-size: 32px !important; line-height: 1.1 !important; font-weight: 700 !important; letter-spacing: -.5px !important; text-align: left !important; } .skill-vocational-diploma-content h3 span, .skill-vocational-diploma-content h1 span { color: #a9c7ff !important; } .skill-vocational-diploma-line { width: 38px !important; height: 3px !important; margin: 15px 0 !important; background: #fff !important; } .skill-vocational-diploma-content p { width: 100% !important; max-width: 100% !important; margin: 0 0 15px !important; color: #e9f0fb !important; font-size: 14px !important; line-height: 1.65 !important; text-align: left !important; } .certificate-btn { width: 100% !important; max-width: 100% !important; min-height: 48px !important; margin-top: 5px !important; padding: 0 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; box-sizing: border-box !important; border-radius: 7px !important; font-size: 12px !important; } .skill-vocational-diploma-dots { width: 45px !important; height: 45px !important; top: 10px !important; left: 10px !important; opacity: .25 !important; } .skill-vocational-diploma-ring-top { width: 70px !important; height: 70px !important; top: -25px !important; right: -20px !important; opacity: .3 !important; } .skill-vocational-diploma-ring-bottom { width: 80px !important; height: 80px !important; bottom: -45px !important; left: -40px !important; opacity: .25 !important; } } /* ---------- SMALL MOBILE : 480px and below ---------- */ @media (max-width: 480px) { .skill-vocational-diploma-image, .skill-vocational-diploma-image-circle, .skill-vocational-diploma-image-circle img { height: 205px !important; min-height: 205px !important; } .skill-vocational-diploma-content { padding: 26px 26px 32px !important; } .skill-vocational-diploma-content h3, .skill-vocational-diploma-content h1 { font-size: 29px !important; line-height: 1.1 !important; } .skill-vocational-diploma-content p { font-size: 13px !important; line-height: 1.6 !important; } .certificate-btn { min-height: 46px !important; font-size: 11px !important; } } /* ---------- VERY SMALL MOBILE : 360px and below ---------- */ @media (max-width: 360px) { .skill-vocational-diploma-image, .skill-vocational-diploma-image-circle, .skill-vocational-diploma-image-circle img { height: 185px !important; min-height: 185px !important; } .skill-vocational-diploma-content { padding: 23px 16px 30px !important; } .skill-vocational-diploma-content h3, .skill-vocational-diploma-content h1 { font-size: 26px !important; } .skill-vocational-diploma-content p { font-size: 12px !important; line-height: 1.6 !important; } } .programme-duration { display: inline-flex; align-items: center; gap: 10px; margin: 18px 0 20px; padding: 10px 18px; background: #ffffff; border: 2px solid #a9c7ff; border-radius: 30px; color: #083C7C; font-size: 18px; font-weight: 700; line-height: 1; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); } .programme-duration i { font-size: 17px; color: #083C7C; } @media (max-width: 767px) { .programme-duration { margin: 14px 0 18px; padding: 9px 15px; font-size: 15px; gap: 8px; } .programme-duration i { font-size: 15px; } } /* ============================================================================ SKILL & VOCATIONAL - DIPLOMA PROGRAMMES: THE SAME TREATMENT AS THE CERTIFICATE PAGE ---------------------------------------------------------------------------- This page is the same template as certificateprogrammes-6months.php under the skill-vocational-diploma prefix, and it arrived in the same state. Every number here is the same one, measured the same way, and the same source: the Grade 10 banner, and the site ladder the header and the footer run on. This page does not load global-typography.css, so nothing is inherited - every value is written out. NOTHING IN THE MARKUP WAS TOUCHED. DIPLOMA PROGRAMMES, both paragraphs, the duration pill, the button, the four eligibility cards, the three decorations and the photograph are all still in diplomaprogrammes-1year.php exactly as they were. THE BACKGROUND IS NOT TOUCHED This page's banner navy is #062D5C and it stays #062D5C. That is this page's own colour. The Grade 10 navy is not carried across as a background on this page or on any page that comes next, and the lettering inside the duration pill and the button stays #083C7C on white. --------------------------------------------------------------------------- 1. THE BANNER TYPE Measured at a 912px viewport before this block: the pill ".skill-vocational-diploma-label" 13px icon, 8px 14px padding, 18px below, rgba(83,119,205,.35) fill "SKILL & VOCATIONAL PROGRAMMES" 16px/25.6 ls 2px uppercase the title h3, and its span 42px/46.2 w700 ls -0.8px mixed case, span #A9C7FF the rule 45 x 3px r10 18px either side "Duration: 1 Year" 18px/18 w700, no tracking both paragraphs 15px/25.5 no tracking, solid #E9F0FB, 680px wide All of it now on the Grade 10 scale - the pill's fill, border, radius, padding, gap, tracking and type; the title at 40px/1.08 weight 800, -1px, uppercased, span #A9C7FF; the rule at 36 x 3px r10 margin 24px 0 20px; both paragraphs at the description role; the duration pill and the button at the pill's type. The full ladder is the one already set out on the certificate page and is not repeated here. --------------------------------------------------------------------------- 2. THE BANNER GUTTER The banner text sat 53.8px in from the left of the page while the header logo sat on 26.9px. The gutter goes on the content column as a margin rather than as padding on the section, because here the photograph is a normal flex item of the same column and not anchored to the right edge the way Grade 10's is - padding on the section would have pushed the photograph in from the left and left a navy strip down its side. A margin on the content column moves only the text, and the photograph still bleeds the full width. --------------------------------------------------------------------------- 3. THE TWO SECTIONS ON THE HEADER AND FOOTER WIDTHS Measured at a 912px viewport before this block: header and footer content 26.9 .... 869.9 843.0 wide Eligibility Criteria 0.0 .... 896.8 896.8 wide 26.9 outside each side Course categories 0.0 .... 896.8 896.8 wide 26.9 outside each side Both were running the full width of the page, outside the header and the footer rather than level with them, exactly as they were on the certificate page. They now run on the site ladder. .eligibility-section is scoped to its own direct child, because the class on that child is the plain class name "container", which is used all over the site and is not safe to name on its own. Both sections already carried the same padding above and below - 60px and 60px on each - so they are not named here. --------------------------------------------------------------------------- 4. THE FOUR ELIGIBILITY CARDS PUT ON ONE LEFT EDGE The same fault as the certificate page's five cards, and the same cause: the card is a flex column with align-items:center and text-align:center, and the content column inside it is a flex column whose children were not stretched, so each took only as wide as its own longest line. Measured at a 912px viewport before this block: card 1 icon 215.2 heading 106.5 body 106.5 "Minimum Qualification:" card 2 icon 633.6 heading 575.4 body 575.4 "Minimum Age:" card 3 icon 215.2 heading 62.8 body 62.8 "Appearing Students:" card 4 icon 633.6 heading 592.7 body 592.7 "Age Limit:" Four cards, and in every one of them the icon started somewhere else entirely from the words under it. .eligibility-card align-items flex-start, text-align left .eligibility-content width 100%, flex column, align-items flex-start .eligibility-content h3,p width 100%, text-align left The heading on this page was 24px on a 33.6px line - fixed, but 50% larger than the 16px of copy directly under it and large enough that every one of the four headings wrapped. It is now 17px at weight 700 on a 1.35 line, which is the card-title size the rest of the site uses. The heading colour is left as it was. The 01 to 04 in the corner is absolutely positioned and is not touched. --------------------------------------------------------------------------- 5. THE THREE DECORATIONS The dotted grid and the two rings are turned off, as on the certificate page and on the ECCE banners. Hidden, not deleted - remove the one rule below and they come straight back. --------------------------------------------------------------------------- NOT TOUCHED The photograph keeps this page's own shape: the banner is stacked here, the text above and a full-width 330px band of picture below it. That is a change of layout, not of font or width, so it is not made. The odlcf-* blocks below the footer strip are shared site components. odlcf-cta carries 36px over 40px and odlcf-strip carries 14px over 0px; both are out by the equal-padding rule and both are left alone, because changing them here changes them on every page in the site. There is no table on this page, so there is no table to bring to 16px. ============================================================================ */ .skill-vocational-diploma { font-family: Arial, Helvetica, sans-serif !important; box-sizing: border-box !important; } .skill-vocational-diploma-content { padding-left: 0 !important; margin-left: max(4%, 50% - 690px) !important; } /* ---------------------------------------------------------------- the pill */ .skill-vocational-diploma-label { width: fit-content !important; display: flex !important; align-items: center !important; gap: 10px !important; padding: 11px 20px !important; margin-bottom: 25px !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; border-radius: 30px !important; background: rgba(255, 255, 255, 0.1) !important; color: #ffffff !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; backdrop-filter: blur(5px) !important; } .skill-vocational-diploma-label i { font-size: 16px !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } /* ------------------------------------------- the category and the title */ .certificate-category { font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: #a9c7ff !important; } .skill-vocational-diploma-content h3 { font-family: Roboto, Arial, sans-serif !important; font-size: 40px !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -1px !important; text-transform: uppercase !important; color: #ffffff !important; text-align: left !important; margin: 0 !important; } .skill-vocational-diploma-content h3 span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; color: #a9c7ff !important; } /* ---------------------------------------------------------------- the rule */ .skill-vocational-diploma-line { width: 36px !important; height: 3px !important; margin: 24px 0 20px !important; background: #ffffff !important; border-radius: 10px !important; } /* --------------------------------- the two paragraphs, the pill, the button */ .skill-vocational-diploma-content > p { font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.75 !important; letter-spacing: 0.2px !important; color: rgba(255, 255, 255, 0.9) !important; text-align: justify !important; margin-top: 0 !important; } .programme-duration, .certificate-btn { font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } .programme-duration i, .certificate-btn i { font-size: 15px !important; letter-spacing: 0.3px !important; } /* ---------------------------------------------------------- the sections */ .eligibility-section > .container, .courses-section > .courses-container { width: 92% !important; max-width: 1380px !important; margin-left: auto !important; margin-right: auto !important; } /* ------------------------------------------------------- the eligibility cards */ .eligibility-section .eligibility-card { align-items: flex-start !important; text-align: left !important; } .eligibility-section .eligibility-content { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; text-align: left !important; } .eligibility-section .eligibility-content h3, .eligibility-section .eligibility-content p { width: 100% !important; text-align: left !important; } .eligibility-section .eligibility-content h3 { font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.35 !important; letter-spacing: 0 !important; } .eligibility-section .eligibility-content h3 b { font-weight: 700 !important; font-size: inherit !important; line-height: inherit !important; letter-spacing: inherit !important; } /* -------------------------------------------------------- the decorations */ .skill-vocational-diploma-dots, .skill-vocational-diploma-ring { display: none !important; } /* ============================================================================ THE SAME LADDER THE CERTIFICATE PAGE USES ============================================================================ */ @media screen and (max-width: 1399px) { .skill-vocational-diploma-content > p { font-size: 16px !important; line-height: 1.75 !important; } } @media screen and (max-width: 1199px) { .skill-vocational-diploma-content { margin-left: max(3%, 50% - 690px) !important; } .skill-vocational-diploma-label { gap: 9px !important; padding: 10px 18px !important; margin-bottom: 22px !important; font-size: 15px !important; } .skill-vocational-diploma-label i { font-size: 15px !important; } .skill-vocational-diploma-content h3 { font-size: 40px !important; line-height: 1.08 !important; letter-spacing: -1px !important; } .eligibility-section > .container, .courses-section > .courses-container { width: 94% !important; } } @media screen and (max-width: 991px) { .skill-vocational-diploma-label { gap: 8px !important; padding: 9px 17px !important; margin-bottom: 20px !important; font-size: 14px !important; line-height: 1.35 !important; } .skill-vocational-diploma-label i { font-size: 14px !important; } .skill-vocational-diploma-content h3 { font-size: 36px !important; line-height: 1.1 !important; letter-spacing: -0.8px !important; } .skill-vocational-diploma-line { margin: 18px 0 15px !important; } .skill-vocational-diploma-content > p { font-size: 16px !important; line-height: 1.65 !important; } } @media screen and (max-width: 767px) { .skill-vocational-diploma-content { margin-left: max(5%, 50% - 690px) !important; } .skill-vocational-diploma-label { gap: 8px !important; padding: 8px 15px !important; margin-bottom: 18px !important; font-size: 13px !important; line-height: 1.35 !important; } .skill-vocational-diploma-label i { font-size: 13px !important; } .skill-vocational-diploma-content h3 { font-size: 34px !important; line-height: 1.08 !important; letter-spacing: -0.8px !important; } .skill-vocational-diploma-content > p { font-size: 15px !important; line-height: 1.6 !important; } .eligibility-section > .container, .courses-section > .courses-container { width: 90% !important; } } @media screen and (max-width: 575px) { .skill-vocational-diploma-label { gap: 7px !important; padding: 7px 13px !important; margin-bottom: 16px !important; font-size: 12px !important; line-height: 1.4 !important; } .skill-vocational-diploma-label i { font-size: 12px !important; } .skill-vocational-diploma-content h3 { font-size: 30px !important; line-height: 1.1 !important; letter-spacing: -0.6px !important; } .skill-vocational-diploma-content > p { font-size: 14px !important; line-height: 1.6 !important; } } @media screen and (max-width: 480px) { .skill-vocational-diploma-content { margin-left: max(4%, 50% - 690px) !important; } .skill-vocational-diploma-label { gap: 6px !important; padding: 6px 12px !important; margin-bottom: 14px !important; font-size: 11px !important; line-height: 1.4 !important; } .skill-vocational-diploma-label i { font-size: 11px !important; } .skill-vocational-diploma-content h3 { font-size: 29px !important; } .skill-vocational-diploma-line { width: 30px !important; height: 3px !important; margin: 16px 0 !important; } .eligibility-section > .container, .courses-section > .courses-container { width: 92% !important; } } @media screen and (max-width: 400px) { .skill-vocational-diploma-content h3 { font-size: 29px !important; line-height: 1.1 !important; letter-spacing: -0.4px !important; } } /* ============================================================================ THE INSIDE OF THE TWO SECTIONS PUT ON THE HEADER AND FOOTER EDGES TOO ---------------------------------------------------------------------------- The container of each section was already on the header and footer widths and measured 0.0 on each side. That was only the outside of the box. Everything inside it was still 42px in. header and footer content 26.9 .... 869.9 843.0 wide .eligibility-section > .container 26.9 .... 869.9 843.0 wide on the header edges .animated-section-heading 68.9 .... 827.9 759.0 wide 42.0 in each side .eligibility-grid 68.9 .... 827.9 759.0 wide 42.0 in each side .courses-section > .courses-container 26.9 .... 869.9 843.0 wide on the header edges .animated-section-heading 68.9 .... 827.9 759.0 wide 42.0 in each side .courses-grid 68.9 .... 827.9 759.0 wide 42.0 in each side The container itself was on the header edges. Everything inside it was 42px in from them, and all of it was the same 42px, because the container carries 42px of left and right padding. That padding is the whole of the gap - the margin on the container is what put the container itself on the header edge, and once the container is on the header edge the padding has nothing left to do but push the contents back off it. So both grids were 84px narrower than the header and the footer, and the first card in each row and the last card in each row both sat 42px inside the edges they were supposed to be level with. WHAT IS DONE .eligibility-section > .container, .courses-section > .courses-container padding-left 0 padding-right 0 Only the two horizontal values. The vertical padding on both is a separate pair and is left exactly as it was. What this does: .animated-section-heading on the header and footer edges .eligibility-grid on the header and footer edges .courses-grid on the header and footer edges first card in each row on the left edge last card in each row on the right edge The grids are grids, so the cards share out the extra 84px between them - each card is 42px wider and the gap between the two columns is unchanged. Nothing is clipped, nothing overflows, and no card loses a line of text, because nothing about their width is fixed. THE CARD PADDING IS NOT TOUCHED Each card carries its own padding - 20px on the eligibility cards, 18px on the course cards - and that is the space between the card's edge and the words inside it. It is not a gutter to the page and it is left alone. THE SAME CHANGE ON THE OTHER TWO PAGES IN THIS FOLDER This was written for the Diploma Programmes page first, where it was caught from a screenshot of the course cards stopping short of the block below them. The certificate page and the advanced diploma page carry the same 42px and were given the same two declarations, so all three now agree. The Advanced Diploma page was already done in an earlier block. That block is left exactly where it is and this one repeats it. ============================================================================ */ .eligibility-section > .container, .courses-section > .courses-container { padding-left: 0 !important; padding-right: 0 !important; } /* ============================================================================ DIPLOMA: THE BANNER TEXT GETS ITS LEFT PADDING BACK ON A PHONE --------------------------------------------------------------------------- ONE DECLARATION. padding-left, on one selector, below 768px. No font, no colour, no background, no border, no radius, no shadow, no width, no height, no margin, no gap, no position. The banner's top and bottom padding, its right padding and its type are not touched. No markup is touched. -------------------------------------------------------------------------- THE FAULT, MEASURED LIVE AT 390px, 360px AND 320px section padding T 0px R 0px B 0px L 0px inner padding T 0px R 0px B 0px L 0px content padding T 26px R 18px B 32px L 0px Every piece of banner text starts at the same place: .skill-vocational-diploma-label L 7.80 "Home / Skill & V..." <- the breadcrumb .certificate-category L 7.80 "SKILL & VOCATIONAL PROGRAMMES" .certificate-btn L 7.80 "EXPLORE CERTIFICATE PROGRAMMES" 7.80px from the edge of the screen. Thirteen separate elements sit within 12px of it. The right padding is 18px at this width, so the banner is not even symmetric - it has an 18px margin on the right and none on the left. The header logo on the same page, measured on the same load: vw logo left edge 390 15.59px = 4.00% of the viewport 360 14.41px = 4.00% of the viewport 320 12.80px = 4.00% of the viewport So the banner text sat 7.79px LEFT of the logo directly above it, and hard against the screen edge. That is the gap in the screenshot. -------------------------------------------------------------------------- WHY IT IS ZERO, WHICH IS NOT A MISSING VALUE BUT A PRESENT ONE The gutter was never missing. It is set three times in this file: line 1434 .skill-vocational-diploma-content { padding: 65px 40px 65px 7%; } line 1805 @media (max-width: 1199px) padding-left: 6%% line 1851 @media (768px - 991px) padding: 45px 25px 45px 5%% and then taken away again by one rule further down, with no media query around it at all: padding-left: 0 !important; Being later in the file and carrying !important, it beats all three. The same values are written out in the three tiers below 768px - 22px at line 3939, 18px at 4057, 16px at 4089 - and this rule overrides every one of them as well, because 0 with !important outranks any number without. -------------------------------------------------------------------------- THE ONE DECLARATION @media screen and (max-width: 767px) .skill-vocational-diploma-content { padding-left: max(4%, 50% - 690px) !important; } max(4%%, 50%% - 690px) is the gutter expression the rest of the site already uses to put banner text on the header logo's left edge. Below 768px the second term is strongly negative - at 767px it is -306.5 - so it resolves to 4%%, which is exactly where the logo sits at every phone width measured. before after header logo 390 7.80 15.59 15.59 on it 360 7.20 14.41 14.41 on it 320 6.41 12.80 12.80 on it It is the same expression written for .ecce-levelN-content earlier in this work, so these three banners, the ECCE banners and the header all land on one edge at every phone width. -------------------------------------------------------------------------- NOTHING ELSE MOVES The right padding stays 22px below 481px and 18px below 768px; the top stays 26px and the bottom 32px at 480px. The banner's height, its type, its gradient, the breadcrumb chip, the category label, the h3, the rule, the duration chip, the two paragraphs and the button are all untouched, as are the rings, the dots and the photograph. box-sizing is already border-box on this element at line 3939, so the padding comes out of the width and the banner does not grow: measured width stays 390.00px at a 390px viewport and the page does not overflow. -------------------------------------------------------------------------- ABOVE 768px NOTHING CHANGES The declaration is inside max-width:767px, so the tablet and desktop banners are exactly as they are now. Worth knowing, not changed here: that unguarded padding-left: 0 also overrides the 7%% / 6%% / 5%% gutter above 768px, so the desktop banner text also starts hard against the edge. That is outside a mobile view and is left alone - say the word and it is the same one declaration in a wider query. ============================================================================ */ /* ---- the banner text gets its left padding back on a phone ---- */ /* An unguarded padding-left:0 !important further down this file overrides the 7%% / 6%% / 5%% gutter AND every mobile tier, so all the banner text starts 7.80px from the screen edge at 390px - 7.79px left of the header logo directly above it, which sits at 4.00%% of the viewport. Restored below 768px with the same expression the ECCE banners use, so the text lands on the logo at 390, 360 and 320. box-sizing is already border-box, so the banner does not widen. Top, bottom and right padding untouched. */ @media screen and (max-width: 767px) { .skill-vocational-diploma-content { padding-left: max(4%, 50% - 690px) !important; } }